<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            计算属性简写
        </title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 计算属性 -->
        <div id="root">
            <input type="text" v-model="xing"></input> <br/>
            <input type="text" v-model="ming"></input> <br/>
            <span>全名：{{fullName}} </span> <br/> <!--不建议写复杂函数-->
        </div>
        
    </body>
    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data:{
                xing: "王",
                ming: "五",
                fullName: "王-五"
            },
            // computed:{ // 计算属性, 
            //     // fullName: {
            //     //     get(){//this 指向的是vm， 调用时机： 1. 初次读取fullName， 然后被缓存， 2. 依赖的计算属性被更新。 只有get方法时， 可以简写。
            //     //         return this.xing+"-"+this.ming
            //     //     }
            //     // }
            //     fullName(){
            //         return this.xing+"-"+this.ming
            //     }

            // },
            watch:{
                xing(newValue, oldValue){
                    // this.fullName = newValue+"-"+this.ming
                    setTimeout(()=>{
                        this.fullName = newValue+"-"+this.ming
                    }, 1000)
                },
                ming(newValue, oldValue){
                    this.fullName = this.xing+"-"+newValue
                },
            }
        })
    </script>
</html>